<template>
  <view class="share">
    <view class="barcenter" style="">
      <view class="navbar-left" v-if="!error">
        <view class="subtitle">
          {{ messageList.name }} 分享的 {{ messageList.message_total }} 条对话
        </view>
        <view class="typeBtn" @click="continueChat">继续聊天</view>
      </view>
    </view>
    <!-- <u-navbar @leftClick="rightClick" :autoBack="true"></u-navbar> -->
    <scroll-view
      v-if="!error"
      scroll-y
      style="height: 90vh"
      :scroll-into-view="lastBottomId"
      :scroll-anchoring="true"
      class="scroll-view"
    >
      <view class="list" id="list">
        <template>
          <view
            :id="index + 6"
            v-for="(item, index) in messageList.messages"
            style="position: relative"
          >
            <chat-item
              :item="item"
              systemIcon=""
              :share="true"
              :sysRole="sysRole"
              :index="index"
            ></chat-item>
          </view>
        </template>
      </view>
      <view id="last-msg-item"></view>
    </scroll-view>
  </view>
</template>
<script>
import chatItem from '@/pages/home/components/chat-item'
import { newFrom_share } from '@/network/api'
export default {
  async onLoad(option) {
    uni.setNavigationBarTitle({
      title: '新的聊天',
    })
    console.log('option', option)
    this.getOption = option
    try {
      await this.$store.dispatch('IshareInfo', {
        share_uuid: option.uuid,
      })
      uni.setNavigationBarTitle({
        title: this.messageList.title,
      })
    } catch (error) {
      uni.showToast({
        title: error.message,
        icon: 'error',
        duration: 3000,
      })
      this.error = true
    }
  },
  name: '',
  data() {
    return {
      getOption: {},
      lastBottomId: '',
      chatList: [],
      error: false,
    }
  },
  components: {
    chatItem,
  },
  computed: {
    messageList() {
      return this.$store.state.share.messageInfo
    },
    sysRole() {
      return this.$store.state.chatAI.systemRole
    },
    token() {
      return this.$store.state.auth
    },
  },
  async created() {
    setTimeout(() => {}, 200)
  },
  scrollBottom() {
    this.$nextTick(() => {
      this.lastBottomId = 'last-msg-item'
      this.$nextTick(() => {
        this.lastBottomId = ''
      })
    })
  },
  methods: {
    async continueChat() {
      if (this.error) return
      if (!this.token.token)
        return uni.showToast({
          title: '您还未登录',
          icon: 'none',
        })
      uni.showLoading({
        title: '跳转中...',
        mask: true,
      })
      // 跳转之后还需要判断是否有token
      // 先获取聊天id 然后跳转带过去
      try {
        const res = await newFrom_share({
          uuid: this.getOption.uuid,
        })
        this.$store.commit('setShowHistory', false)
        await this.$store.dispatch('IchatMessageList', { conversation_id: res.id })
        this.$store.commit('SETSHAREID', res.id)

        this.$store.commit('SETSHARENAMENAME', this.messageList.title)

        this.$store.commit('SETNAME', this.messageList.title)
        this.$store.commit('SETNEWID', res.id)
        uni.navigateTo({
          url: '/pages/home/home',
        })
      } catch (error) {}
      uni.hideLoading()
    },
  },
}
</script>
<style lang="scss" scoped>
.share {
  padding: 0 32rpx;
  box-sizing: border-box;
  .list {
    display: flex;
    flex-direction: column;
    // padding: 32rpx 32rpx 58rpx 32rpx;
    box-sizing: border-box;
  }
}
.barcenter {
  width: 100%;
  height: 80rpx;
  background-color: #fff;
  border-radius: 20rpx;
  // margin-top: calc(60rpx + var(--status-bar-height));
}
.navbar-left {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6rpx 6rpx 6rpx 32rpx;
  box-sizing: border-box;
  font-size: 28rpx;
}
.subtitle {
  font-size: 28rpx;
  color: rgb(48, 48, 48);
}
.typeBtn {
  width: 178rpx;
  height: 68rpx;
  opacity: 1;
  border-radius: 20rpx;
  color: $main-color;
  font-size: 32rpx;
  line-height: 68rpx;
  text-align: center;
  font-weight: 700;
  background: rgba(209, 218, 255, 1);
}
</style>
